1 00:00:00,630 --> 00:00:01,670 Hello and welcome. 2 00:00:01,680 --> 00:00:12,360 In this lecture we are going to be creating the functionality for our to do app using javascript. 3 00:00:12,390 --> 00:00:16,080 All right so we are in charge of our script file. 4 00:00:16,080 --> 00:00:25,620 So we are going to be creating several functions inside these javascript file that will perform various 5 00:00:25,740 --> 00:00:28,100 task. 6 00:00:28,240 --> 00:00:38,340 The first punch function I am going to create here is going to fetch from the database the to dos and 7 00:00:38,340 --> 00:00:40,630 that have already been defined. 8 00:00:40,650 --> 00:00:48,750 All right so we're going to start there create a function was whose main task is to go to the database 9 00:00:48,810 --> 00:00:56,010 and retrieve these to do lists that are in the database and we're going to implement this using local 10 00:00:56,010 --> 00:01:01,850 storage because we are going to be storing the data inside our web browser. 11 00:01:02,910 --> 00:01:06,430 Okay here is the function I have defined. 12 00:01:06,780 --> 00:01:14,590 This function is going to be used by all the other functions that will be created later. 13 00:01:14,640 --> 00:01:21,390 So what this function is going to do as you can see there's no parameters passed in the past in any 14 00:01:21,390 --> 00:01:22,470 parameters. 15 00:01:22,500 --> 00:01:32,250 The main purpose of this function is to fetch the content of the To Do list which would be a key in 16 00:01:32,250 --> 00:01:33,590 the local storage. 17 00:01:33,750 --> 00:01:42,040 So it would be use in the Get Out method which is this metate to retrieve the To Do list to to do items 18 00:01:42,470 --> 00:01:46,380 that are inside this local storage. 19 00:01:47,250 --> 00:01:56,490 So if this is the first time the function is called the specific local storage entry will probably be 20 00:01:56,490 --> 00:01:57,260 empty. 21 00:01:57,540 --> 00:01:58,300 Okay. 22 00:01:58,320 --> 00:02:07,660 And the local storage get item called will return not that means it will return empty. 23 00:02:08,260 --> 00:02:11,810 So life form here I've introduced a statement. 24 00:02:11,820 --> 00:02:20,520 So basically what the statement is saying that if the return value is not not that is if it is not empty 25 00:02:20,880 --> 00:02:24,230 then it must be the string. 26 00:02:24,500 --> 00:02:28,190 The string of data which has been stored. 27 00:02:28,200 --> 00:02:28,830 All right. 28 00:02:28,950 --> 00:02:37,710 So the Jays sign here it goes on dog pass is used to convert the Jason's drink back in to Javascript 29 00:02:37,710 --> 00:02:42,080 data that the browser can display. 30 00:02:42,540 --> 00:02:48,970 The return here on Slide 7 is used to when you quit ifone change you can also specify a return value. 31 00:02:49,080 --> 00:02:57,480 So if there's any data in the database this return value here will return the data that's in the local 32 00:02:57,480 --> 00:02:59,220 storage. 33 00:03:00,960 --> 00:03:07,110 So the function here you defined a function by type in the name function followed by the name you want 34 00:03:07,110 --> 00:03:08,670 to give the function. 35 00:03:08,690 --> 00:03:13,810 Giving it in name of get on does code to dos and line 2 and 3. 36 00:03:13,850 --> 00:03:22,350 Basically variables have created line two variables to dos set it to cross to a new erry an array can 37 00:03:22,350 --> 00:03:25,850 combine multiple variables has one line. 38 00:03:25,840 --> 00:03:33,630 3 again created a variable code to dos underscore s t r we stansel String and I've set it to a local 39 00:03:33,660 --> 00:03:34,470 storage. 40 00:03:34,550 --> 00:03:37,460 Get high tech method unpassed it. 41 00:03:37,480 --> 00:03:38,650 The to do. 42 00:03:38,850 --> 00:03:40,620 Which is this variable here. 43 00:03:41,020 --> 00:03:41,440 K. 44 00:03:41,510 --> 00:03:42,920 Best blank line for. 45 00:03:42,930 --> 00:03:54,030 So if the DOS list variable here is strictly as clear mentioned W was me strictly it is strictly not 46 00:03:54,090 --> 00:03:56,240 empty then return. 47 00:03:56,290 --> 00:04:02,960 Then you get this and convert it using this to javascript. 48 00:04:03,100 --> 00:04:09,150 Okay pass this variable here and return wherever you finally did open the database. 49 00:04:09,150 --> 00:04:11,330 That's what they're saying. 50 00:04:12,450 --> 00:04:17,220 So I've created another function from line 10 to 20. 51 00:04:17,220 --> 00:04:20,410 This function is called ADD. 52 00:04:20,550 --> 00:04:21,350 Right. 53 00:04:21,360 --> 00:04:24,030 So what the function will do. 54 00:04:24,030 --> 00:04:33,960 The function is it will be called when the user of this it all clicks on the button. 55 00:04:34,500 --> 00:04:39,440 So when the button is clicked on a tool Get it would trigger this. 56 00:04:40,570 --> 00:04:41,240 Methods here. 57 00:04:41,260 --> 00:04:43,270 Documento element. 58 00:04:43,650 --> 00:04:49,500 And if it is passed in Tusk the task which is the value here. 59 00:04:49,790 --> 00:04:53,620 It's well defined in the hastier mail which is this task here. 60 00:04:53,710 --> 00:04:57,020 That's the idees talking about it to get dat. 61 00:04:57,220 --> 00:05:00,640 And then add the value that has been imported. 62 00:05:00,640 --> 00:05:06,640 So we use that and retrieve the value that the user has typed in. 63 00:05:06,790 --> 00:05:07,480 All right. 64 00:05:07,640 --> 00:05:09,350 So are we what. 65 00:05:09,430 --> 00:05:14,750 What then does heat cause they get online 13 there. 66 00:05:14,970 --> 00:05:20,300 It's called a variable called to do which is to get to dos. 67 00:05:20,320 --> 00:05:27,620 So cause it get to dos we'd retrieve the already existing to do it from the database. 68 00:05:27,620 --> 00:05:28,530 All right. 69 00:05:28,570 --> 00:05:34,960 And then when and then it is appended to the Arey using the push method. 70 00:05:35,020 --> 00:05:40,440 So does push met or it is used to append to it list that is added to your list. 71 00:05:40,540 --> 00:05:41,180 Yes indeed. 72 00:05:41,200 --> 00:05:50,190 Push medart to say for these variables add this method and any task that's been listed. 73 00:05:50,260 --> 00:05:56,280 You add if there's any more task you need to add append it to the existing list. 74 00:05:56,410 --> 00:06:00,380 So the push is used to add or add. 75 00:06:01,120 --> 00:06:08,850 So once the new list is that pendent it is saved to a local story using the local store a set items 76 00:06:08,860 --> 00:06:16,600 they don't set item is what is used to store it inside the local storage store to store that. 77 00:06:16,600 --> 00:06:22,780 What we need to do first we use the string fi we have a string of five the three. 78 00:06:22,900 --> 00:06:28,270 Okay so the Using the second string of 5 method. 79 00:06:28,270 --> 00:06:37,240 What that does when we store enables us to store the returned string using the local storage set item 80 00:06:37,240 --> 00:06:38,570 method. 81 00:06:39,130 --> 00:06:41,650 I have called ifone John here. 82 00:06:41,650 --> 00:06:44,930 Sure but we have not implemented written that function yet. 83 00:06:45,040 --> 00:06:48,500 But this is where we also call the function from school. 84 00:06:48,560 --> 00:06:52,960 Later on will write a function called show or notice. 85 00:06:53,620 --> 00:06:57,810 Notice we've got a return value here called force. 86 00:06:58,000 --> 00:06:58,970 So what that does. 87 00:06:58,980 --> 00:07:06,160 It avoids any for their actions generated by the click event so even though the use of click it will 88 00:07:06,160 --> 00:07:07,890 avoid any further action. 89 00:07:07,880 --> 00:07:10,310 That's what that means. 90 00:07:10,630 --> 00:07:17,870 What am going to do is split this show in two full javascript because he's gone on a bit long so I'm 91 00:07:17,890 --> 00:07:23,460 going to stop this lecture here and will continue in part 2. 92 00:07:23,500 --> 00:07:24,880 Thanks for watching. 93 00:07:24,930 --> 00:07:25,790 Bye for now.